Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

376
Visualizações
Failed %s type: %s%s, prop, Invalid prop `source` supplied to `Image`, expected one of type [number]

I am trying to retrieve data and images from the node backend everything is retrieving but not images and it's giving me an Invalid prop error

this is listing Screen

function ListScreen(props) {
  const [listing, setListing] = useState([]);

  useEffect(() => {
    loadlistings();
  }, []);

  const loadlistings = async () => {
    const res = await listingApi.getListing();
    setListing(res.data);
  };
  return (
    <View styles={styles.container}>
      <StatusBar styles="auto" />
      <FlatList
        data={listing}
        keyExtractor={(item) => item._id}
        renderItem={({ item }) => (
          <ListItem
            title={item.name} //working fine
            subTitle={item.job} //working fine
            name="email"
            name2="phone"
            image={item.image} //not working 
          />
        )}
      />
    </View>
  );
}

this ListItem Component

function ListItem({ image, title, subTitle, name, name2 }) {
  return (
    <Pressable>
      <View style={styles.container}>
        {image && <Image style={styles.image} source={image} />}
        <View style={styles.detailsContainer}>
          <Text style={styles.title}> {title}</Text>
          <Text style={styles.subTitle}> {subTitle}</Text>
          {Icon && <Icon name={name} />}
          {Icon && <Icon name={name2} />}
        </View>
      </View>
    </Pressable>
  );
}

this is the data from the backend

{
"_id": "629b5670579b00cd931122e9",
"name": "Harry Potter",
"job": "BackEnd Developer",
"image": "http://192.168.1.40:4545/image/image1654347376236_922911498.jpg",
"__v": 0
},
{
"_id": "629b568a579b00cd931122eb",
"name": "John Wick",
"job": "Full Stack Developer",
"image": "http://192.168.1.40:4545/image/image1654347402595_708253593.jpg",
"__v": 0
}

Please help anyone stuck on this for days

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

You have to provide the image URI by passing an object with the key uri to the source prop of <Image /> like:

<Image style={styles.image} source={{uri: image}} />
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda